{{ define "main" }}

{{ partial "page-title.html" . }}

  <!-- portfolio -->
  <section class="section">
    <div class="container">
      <div class="row mb-5">
        <div class="col-12">
          <div class="btn-group btn-group-toggle justify-content-center d-flex flex-wrap" data-toggle="buttons">
            <label class="btn btn-sm btn-primary active">
              <input type="radio" name="shuffle-filter" value="all" checked="checked" />All
            </label>
            {{ range .Site.Data.portfolio.list }}
            <label class="btn btn-sm btn-primary">
              <input type="radio" name="shuffle-filter" value="{{.type}}" />{{ .title }}
            </label>
            {{ end }}
          </div>
        </div>
      </div>
      <div class="row shuffle-wrapper">
        {{ range .Site.Data.portfolio.item }}
        <div class="col-lg-4 col-6 mb-4 shuffle-item" data-groups="[{{range $index, $element:= .projectType }}{{if eq $index 0}} {{else}},{{end}}&quot;{{.type}}&quot;{{ end }}]">
          <div class="position-relative rounded hover-wrapper">
            <img src="{{.image | absURL }}" alt="portfolio-image" class="img-fluid rounded w-100 d-block">
            <div class="hover-overlay">
              <div class="hover-content">
                <a class="btn btn-light btn-sm" href="{{ .projectURL }}">view project</a>
              </div>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
    </div>
  </section>
  <!-- /portfolio -->

  <!-- clients -->
  <section class="section bg-light">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <h2 class="section-title">My Clients</h2>
        </div>
      </div>
      {{ partial "client-slider.html" . }}
    </div>
  </section>
  <!-- /clients -->

{{ end }}